<template>
  <div class="content">
        <TableLayout form-title="">
            <!-- 查询条件 start-->
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="86px"  slot="form"  :label-position="labelPosition" :rules="rules" ref="ruleForm">          
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="评价人" >
                            <el-input v-model.trim="formInline.userName" placeholder="请输入姓名关键字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="e学云ID号" prop="eId">
                           <el-input v-model.trim="formInline.eId" placeholder="请输入e学云ID号" :maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="评论内容">
                            <el-input v-model.trim="formInline.content" placeholder="请输入内容关键字"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="评论时间">
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始时间" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center"> 至 </el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" format="yyyy-MM-dd" placeholder="选择结束时间" :picker-options="formInline.pickerOptions2" @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('ruleForm')">查询</el-button>
                </div>
            </el-form>
            <!-- 查询条件 end-->
            <div class="table-title" slot="table-title">
            </div>
            <!-- 表格 start -->
            <el-table :data="commentList" style="width: 100%" border  v-loading="loading" ref="formInline" class="comment-Detail-list">
                <el-table-column label="评论人" align="center" >
                    <template scope="scope">
                        <span>{{scope.row.name | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="e学云ID号" align="center" >
                    <template scope="scope">
                        <span>{{scope.row.eCode | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="评论内容" align="center"  min-width="170">
                    <template scope="scope">
                        <span>{{scope.row.commentContent | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="评论时间" align="center" min-width="140">
                    <template scope="scope">
                        <span>{{scope.row.createTime | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="回复内容" align="center" min-width="170">
                    <template scope="scope">
                        <span>{{scope.row.replyContent | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="回复时间" align="center" min-width="140">
                     <template scope="scope">
                        <span>{{scope.row.replyTime | isNull}}</span>
                    </template>
                </el-table-column> 

                <el-table-column label="操作"  width="80">
                    <template scope="scope">               
                        <el-button type="text" class="btn-success" @click="checkComment(scope.row)">查看</el-button>
                    </template>
                </el-table-column>   


            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
            <!-- 表格 end -->
        </TableLayout>

        <comment-dialog :visible="commentDialog" v-if="commentDialog.isShow"></comment-dialog>

    </div>
</template>

<script>
import moment from 'moment';
import TableLayout from 'components/TableLayout';
import commentDialog from './commentDialog';
import { getCommentListByParams } from 'api/onlineLesson';
import { mapState, mapActions, mapGetters } from 'vuex';
import validate from '@/utils/validate';

export default {
    name: 'commentDetailList',
    components: {TableLayout, commentDialog},
    data() {
        return {
            lessonId: '', // 评论Id
            labelPosition: 'right',
            formInline: {
                userName: '', // 评论人
                eId: '', // e学云ID
                content: '', // 评论内容
                startDate: '',
                endDate: '',
                pickerOptions1: {},
                pickerOptions2: {}
            },
            commentList: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false,
            schoolLoading: false,
            rules: {
                eId: [...validate.exueCode()]
            },
            commentDialog: {
                isShow: false,
                info: {}
            }
        }
    },
    created() {
        this.lessonId = this.$route.params.lId;
        // 根据课程ID获取评论列表
        this.searchFetchData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
           // 全局获取行数
        ...mapActions(['ChangePageSize']),
        
         // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },

        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },

         // 功能：开始日期选择
        dateChange1(date) {
            console.log(date);
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            };
        },


    // 功能：结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() ;
                }
            };
        },

        // 查询
        onSubmit(formName) {  
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },

        // 查询数据方法
        searchFetchData() {
            this.loading = true;
            let startTemp = this.formInline.startDate == ''?'' :moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endTemp = this.formInline.endDate == ''?' ' :moment(this.formInline.endDate).format('YYYY-MM-DD');
            getCommentListByParams(
                this.lessonId,
                this.formInline.userName, 
                this.listQuery.page,
                this.config.pageSize,
                this.formInline.eId, 
                this.formInline.content, 
                startTemp, 
                endTemp).then(res => {
                    this.commentList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination.total;
                    this.loading = false;
                })
        },

        // 查看
        checkComment(item) {
            this.commentDialog.isShow = true;
            this.commentDialog.info = item;
        }
    }
  
}
</script>

<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
}
</style>


